<template>
  <div class="fee-title">
    <span class="title-name">费用明细 - {{ feeIndex + 1 }}</span>
    <div v-if="form.feeList.length > 1" class="title-delete" @click="delFee(feeIndex)">
      <icon-delete />
      <span> 删除 </span>
    </div>
  </div>
  <div class="content">
    <page-form-row :gutter="10">
      <page-form-item label="费用金额" v-bind="getFeeAttrs('amount', '请输入费用金额')">
        <i-input-number v-model="infoItem.amount" unit="元" :precision="2" :max="99999999.99" @change="changeFeeItem" />
      </page-form-item>
      <page-form-item
        label="支出费项"
        v-bind="getFeeAttrs('item', '请选择支出费项')"
        labelTooltipContent="支持在系统管理的系统参数中新增或编辑支出费项"
      >
        <sysdict-select v-model="infoItem.item" allow-clear allow-search code="cost_fee_item" :addable="false" />
      </page-form-item>
      <page-form-item label="费用发生时间" v-bind="getFeeAttrs('occurTime', '请选择费用发生时间')">
        <i-date-picker
          :disabled-date="(current) => dayjs(current).isAfter(dayjs())"
          :disabled-time="(current) => getDisabledTime(current)"
          class="w-full"
          v-model="infoItem.occurTime"
          show-time
          format="YYYY-MM-DD HH:mm"
        />
      </page-form-item>
    </page-form-row>
    <page-form-row :gutter="10">
      <page-form-item label="车牌号">
        <!-- 关联工单,业务单 -->
        <template v-if="form.refCostType == 1 || form.refCostType == 2">
          <a-select :allow-clear="true" placeholder="请选择" v-model="infoItem.carId" @change="changeRefInfo">
            <a-option v-for="item in refCarInfoList" :key="item.carId" :value="item.carId" :label="item.licenseNo" />
          </a-select>
        </template>
        <!-- 无关联 -->
        <template v-else>
          <remote-select
            v-model="infoItem.carId"
            :params="{
              operateStatusList: [10, 20, 30, 40, 50, 60],
            }"
            :allow-clear="true"
            type="car_licenseno_list"
            @change="changeCarFn"
          />
        </template>
      </page-form-item>
      <page-form-item label="车型">
        <a-tooltip v-if="infoItem.carModel !== '-'">
          <template #content>
            <div>{{ infoItem.carModel }}</div>
          </template>
          <i-input v-model="infoItem.carModel" disabled />
        </a-tooltip>
        <i-input v-model="infoItem.carModel" v-else disabled />
      </page-form-item>
    </page-form-row>
    <a-divider style="margin: 0 0 20px" />

    <page-form-item
      label="凭证"
      size="1"
      labelTooltipContent="上传格式:支持jpg、jpeg、png、doc、docx、pdf、xls、xlsx格式，最多支持上传20个。"
      v-bind="getFeeAttrs('fileIdList', '请上传凭证')"
    >
      <upload-attach
        v-model="infoItem.fileIdList"
        :accept="['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'xls', 'xlsx']"
        :limit="20"
        multiple
        :single="false"
      />
    </page-form-item>
  </div>
</template>

<script setup name="OperateCostFeeItem">
  import { ref, inject } from 'vue'
  import { useVModel } from '@vueuse/core'
  import { Modal, Message } from '@arco-design/web-vue'
  import dayjs from 'dayjs'

  const form = inject('form')
  const refCarInfoList = inject('refCarInfoList')
  const props = defineProps({
    info: Object,
    feeIndex: {
      type: Number,
      default: 0,
    },
    fieldFee: {
      type: String,
      default: '',
    },
  })
  const emit = defineEmits(['update:info', 'changeFee'])
  const infoItem = useVModel(props, 'info', emit)

  const changeFeeItem = () => {
    emit('changeFee', form.value.feeList)
  }

  const getValidatorFn = (propStr, msg) => {
    return propStr == 'item' || propStr == 'fileIdList'
      ? undefined
      : (value, callback) => {
          if (!value) {
            callback(msg)
          }
          callback()
        }
  }
  const getFeeAttrs = (propStr, msg) => {
    return {
      field: `${props.fieldFee}${propStr}`,
      required: true,
      rules: { required: true, message: msg, validator: getValidatorFn(propStr, msg) },
    }
  }
  const range = (start, end) => {
    const result = []
    for (let i = start; i < end; i++) {
      result.push(i)
    }
    return result
  }
  const getDisabledTime = (current) => {
    if (!dayjs().isSame(dayjs(current), 'day')) {
      return {}
    }

    const hour = dayjs().hour() + 1
    const minute = dayjs().minute() + 1

    if (dayjs(current).hour() < hour - 1) {
      return {
        disabledHours: () => range(hour, 24),
      }
    } else if (dayjs(current).minute() < minute - 1) {
      return {
        disabledHours: () => range(hour, 24),
        disabledMinutes: () => range(minute, 60),
      }
    } else {
      return {
        disabledHours: () => range(hour, 24),
        disabledMinutes: () => range(minute, 60),
      }
    }
  }
  // 删除费用信息
  const delFee = (val) => {
    Modal.confirm({
      title: '提示',
      content: `是否要删除报销明细${val + 1}？`,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        let list = form.value.feeList
        list.splice(val, 1)
        emit('changeFee', form.value.feeList)
        Message.success(`已删除`)
      },
    })
  }
  // 选择车辆信息
  const changeCarFn = (val, option) => {
    infoItem.value.carModel = option.modelName
    infoItem.value.licenseNo = option.licenseNo
  }

  // 车牌号选中回填车型
  const changeRefInfo = (val) => {
    if (val) {
      let refInfo = refCarInfoList.value.find((i) => i.carId == val)
      infoItem.value.carModel = refInfo.modelName
      infoItem.value.licenseNo = refInfo.licenseNo
    } else {
      infoItem.value.carModel = '-'
    }
  }
</script>

<style lang="less" scoped>
  .fee-title {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    background-color: #f2f3f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-name {
      font-weight: 600;
      font-size: 16px;
    }
    .title-delete {
      font-size: 14px;
      color: #ea0000;
      cursor: pointer;
    }
  }
  .content {
    padding: 20px;
    padding-bottom: 0;
    border: 1px solid #e5e6eb;
    margin-bottom: 20px;
  }
</style>
